<template>
 <z-container>
    <z-header height="28px">Message Box（弹窗提示）</z-header>
    <z-main>
      <z-row :gutter="12">
        <z-col :span="3">消息提示</z-col>
        <z-col :span="2"><z-button @click="open">default</z-button></z-col>
        <z-col :span="2"><z-button @click="open('success')">success</z-button></z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">消息确认</z-col>
        <z-col :span="2"><z-button @click="open1">default</z-button></z-col>
        <z-col :span="2"><z-button @click="open1('warning')">warning</z-button></z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">内置input支持</z-col>
        <z-col :span="2"><z-button @click="open2">按钮</z-button></z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">自定义下拉框</z-col>
        <z-col :span="2"><z-button @click="open3">按钮</z-button></z-col>
      </z-row>
    </z-main>
 </z-container>
 
</template>
<script>
export default{
  name:'cMessageBox',
  data(){
    return {}
  },
  methods: {
    open(type) {
      let _type = type || ''
      this.$alert('信息描述，信息描述信息描述信息描述信息描述信息描述信息描述信息描述', '成功标题提示', {
        confirmButtonText: '确定',
        type:_type,
        callback: action => {
          console.log(action)
        }
      });
    },
    open1(type) {
      let _type = type || ''
      this.$confirm('信息描述，信息描述信息描述信息描述信息描述信息描述信息描述信息描述', '告警标题提示', {
        confirmButtonText: '确定',
        type:_type,
      }).then(()=>{

      }).catch(()=>{

      })
    },
    open2() {
      this.$prompt('请输入邮箱', '转组员', {
        subTitle:'订投-取件超时 GD202002141858110000',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的邮箱是: ' + value
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });       
      });
    },
    open3() {
      this.$prompt('123', 'HTML 片段', {
        confirmButtonText: '确定',
        dangerouslyUseHTMLString: true
      }).then((value)=>{
        console.log(value)
      }).catch(()=>{

      })
      }
  },
}
</script>